<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>3.事件传参</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				绑定事件传参总结：
						1.不传参数，那就写：@click="showMsg" ，showMsg会收到一个event
						2.传一个参数，那就写：@click="showMsg(6)" ，showMsg会收到一个6
						3.传多个参数，那就写：@click="showMsg(6,7,8)" ，showMsg会收到：6、7、8
						4.传参同时还想用事件对象，那就写：@click="showMsg($event,6)"，showMsg会收到：事件对象、6
						5.注意：传参时，当然也可以传递data中的数据，例如@click="showMsg(name)"
		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<!-- 传一个参数 -->
			<button @click="showMsg1('Vue你要加油哦！')">点我提示信息1</button>
			<!-- 传多个参数 -->
			<button @click="showMsg2(666,777)">点我提示信息2</button>
			<!-- 传参的同时还要使用事件对象 -->
			<button @click="showMsg3($event,888)">点我提示信息3</button>

			<button @click="showMsg4(name)">点我提示信息4</button>

			<!-- 一定不会有人像下面这么写 -->
			<!-- <button @click="showMsg5()">点我提示信息5</button> -->
			<!-- <button @click="showMsg5($event)">点我提示信息5</button> -->
		</div>
	</body>

	<script type="text/javascript">
		//阻止 vue 在启动时生成生产提示。
		Vue.config.productionTip = false
		
		new Vue({
			el:'#demo',
			data:{
				name:'尚硅谷',
				address:'宏福科技园'
			},
			methods:{
				showMsg1(message){
					alert(`同学你好！${message}`)
				},
				showMsg2(a,b){
					alert(`同学你好！${a},${b}`)
				},
				showMsg3(e,n){
					console.log(e)
					alert(`同学你好！${n}`)
				},
				showMsg4(name){
					alert(`学校名：${name}，地址：${this.address}`)
				},
				showMsg5(e){
					console.log(e)
				}
			}
		})
	</script>
</html>